<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<base href="http://192.168.17.50:8080/Web_Ex/">
<style type="text/css">
	body{
		background-color: #bbffaa
	}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		//给文本框绑定获取焦点的事件
		$("#username").focus(function(){
			/*
				text()方法：用来获取或设置成对出现的标签中的文本内容
				对象.text()：获取文本内容
				对象.text("new value")：设置文本内容
				html()方法与text()方法的用法类似，唯一的区别是html()方法可以解析html标签
			*/
			//清空span标签中的文本值
			$("#msg").html("");
		});
		//给登录按钮绑定单击事件
// 		$("#sub").click(function(){
// 			/*
// 				val()：获取或设置input中的value属性值
// 				对象.val()：获取value属性值
// 				对象.val("new value")：设置value属性值
// 			*/
// 			//获取用户输入的用户名
// 			var username = $("#username").val();
// 			//设置验证用户名的正则表达式
// 			var userReg = /^[a-zA-Z0-9_-]{3,6}$/;
// 			if(!userReg.test(username)){
// 				alert("请输入3-6位的字母、数字、下划线或减号的用户名！");
// 				return false;
// 			}
// 			//获取用户输入的密码
// 			var password = $("#pwd").val();
// 			//设置验证密码的正则表达式
// 			var pwdReg = /^[a-zA-Z0-9_-]{6,18}$/;
// 			if(!pwdReg.test(password)){
// 				alert("请输入6-18位的字母、数字、下划线或减号的密码！");
// 				return false;
// 			}
// 			//获取用户输入的确认密码
// 			var repwd = $("#repwd").val();
// 			//判断两次输入的密码是否一致
// 			if(repwd != password){
// 				//清空确认密码，即设置确认密码框的value值为空串
// 				$("#repwd").val("");
// 				alert("两次输入的密码不一致！");
// 				return false;
// 			}
// 		});
		//给文本框绑定change事件
		$("#username").change(function(){
			//获取用户 输入的用户名
			var username = $(this).val();
			//发送Ajax请求验证用户名是否可用
			//设置请求的url
			var url = "CheckUsernameServlet";
			//设置请求参数
			var param = "username="+username;
			$.post(url,param,function(res){
				//将响应信息设置到span元素中
				$("#msg").html(res);
			},"text");
		});
	});
</script>
</head>
<body>
	<h1>欢迎注册</h1>
	<form action="RegistServlet" method="post">
		用户名称：<input type="text" name="username" id="username"><span style="color: red" id="msg">${requestScope.msg }</span><br>
		用户密码：<input type="password" name="password" id="pwd"><br>
		确认密码：<input type="password" name="repwd" id="repwd"><br>
		用户邮箱：<input type="text" name="email" id="email"><br>
		<input type="submit" value="注册" id="sub">
	</form>
</body>
</html>